<template>
	<view>
		<navNav :navobj="navobj"></navNav>
		<view class="form">
			<view class="labelBox">
				<view class="label">头像</view>
				<view class="value">
					<view class="avatarBox" v-if="!form.avatar" @click="addImg">头像</view>
					<image class="avatar" v-else @click="addImg" :src="form.avatar"></image>
					
				</view>
			</view>
			<view class="labelBox">
				<view class="label">昵称</view>
				<view class="value" @click="setname()">
					<view class="input" style="width: 80%;">
						<input disabled="true"  style="text-align: right;" v-model="form.nickName" placeholder="更改你的昵称"></input>
	
					</view>
					<uni-icons type="right"></uni-icons>
				</view>
			</view>
			<view class="labelBox">
				<view class="label">手机号</view>
				<view class="value" @click="setphone(isphone)">
					<view class="input" style="width: 80%;">
						<input v-if="form.phonenumber==''" disabled="true"  style="text-align: right;" :placeholder="isphone"></input>
					  <input v-else disabled="true"  style="text-align: right;" :placeholder="form.phonenumber">
					</view>
					<uni-icons type="right"></uni-icons>
				</view>
			</view>
		</view>
		<view class="button" @click="editUser">保存</view>
	</view>
</template>

<script setup>
	import {reactive,ref,getCurrentInstance,onMounted} from 'vue'
	import {onLoad} from "@dcloudio/uni-app"
	import {storeToRefs} from "pinia";//结构才需要引入
	import {userStore} from '@/store/user.js'//引入空间
	const userStores = userStore()//给空间命名
	const {proxy} = getCurrentInstance()
	const navobj = reactive({
				title:'个人资料',
				image:true
	})
	const form = reactive({
		nickName: '',
		avatar: '',
		phonenumber:''
	})
	const tempFilePaths =ref('')
	const isphone =ref('')

	onLoad(()=>{
		console.log(userStores.user,'user');
		form.nickName = userStores.user.nickName
		form.avatar = userStores.user.avatar
		form.phonenumber = userStores.user.phonenumber
		if(userStores.user.phonenumber==''){
			isphone.value = '绑定你的手机号'
		}else{
			isphone.value =  '更改你的手机号'
		}
	}) 
		
		
	//更改昵称
	const setname=()=>{
		uni.navigateTo({
			url:'/pages-user/setname/setname'
		})
	}
	//更改手机号
	const setphone=(e)=>{
		uni.navigateTo({
			url:'/pages-user/setphone/setphone?id='+e
		})
	}
	
	//修改头像昵称
	const editUser=async()=> {
		var data = {avatar:form.avatar}
		const result = await proxy.$api.editUser(data)
		if(result.code==200){
			userStores.getUser()
			uni.showToast({
				title: '修改成功',
				icon: 'none'
			})
		}else{
			uni.showToast({
				title: result.msg,
				icon: 'none'
			})
		}
	}
	const upImg=async(data)=>{
		const result = await proxy.$api.upImg(data)
		if(result.code==200){
			form.avatar = result.data.url
		}
	}
	const addImg=()=> {
		uni.chooseImage({
			count: 1,
			success: (res) => {
				var data = {
					file: res.tempFilePaths[0]
				}
				upImg(data)
			}
		})
	}

		
	
</script>

<style lang="scss" scoped>
	.button {
		position: fixed;
		bottom: 0px;
		margin: 20px;
		width: calc(100vw - 40px);
		background: $linerBlue;
		text-align: center;
		color: white;
		padding: 10px 0px;
		border-radius: 5px;
		font-weight: bold;
	}

	.form {
		padding: 20px;
		background-color: white;

		.labelBox {
			display: flex;
			justify-content: space-between;

			.label {
				font-size: 16px;
				font-weight: bold;
				margin: 20px 0px;
			}

			.avatar {
				width: 100rpx;
				height: 100rpx;
				border-radius: 100%;
				background-color: $blue;
			}

			.avatarBox {
				width: 55px;
				height: 55px;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: rgba(0, 170, 255, 0.5);
				color: white;
				font-size: 14px;
			}

			.value {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		}
	}
</style>